// Copyright (C) 2020-2022 Intel Corporation
// Copyright (C) 2024 CVAT.ai Corporation
//
// SPDX-License-Identifier: MIT

import React from 'react';
import Icon, {
    CaretDownOutlined,
    CaretUpFilled,
    EyeInvisibleFilled,
    EyeOutlined,
    LockFilled,
    UnlockOutlined,
} from '@ant-design/icons';
import { Col, Row } from 'antd/lib/grid';
import Text from 'antd/lib/typography/Text';

import StatesOrderingSelector from 'components/annotation-page/standard-workspace/objects-side-bar/states-ordering-selector';
import CVATTooltip from 'components/common/cvat-tooltip';
import { StatesOrdering, Workspace } from 'reducers';
import { CaretDownIcon, CaretUpIcon, EyeCloseIcon, ShowGroundTruthIcon, EyeIcon, LockIcon, UnlockIcon } from 'icons';
import { Divider, Space } from 'antd';
import useAnnotation from 'hooks/useAnnotation';

interface Props {
    workspace: Workspace;
    readonly: boolean;
    statesHidden: boolean;
    statesLocked: boolean;
    statesCollapsed: boolean;
    statesOrdering: StatesOrdering;
    switchLockAllShortcut: string;
    switchHiddenAllShortcut: string;
    showGroundTruth: boolean;
    count: number;
    changeStatesOrdering(value: StatesOrdering, type: 'sort' | 'label' | 'status'): void;
    lockAllStates(): void;
    unlockAllStates(): void;
    collapseAllStates(): void;
    expandAllStates(): void;
    hideAllStates(): void;
    showAllStates(): void;
    changeShowGroundTruth(): void;
}

function LockAllSwitcher(props: Props): JSX.Element {
    const { statesLocked, switchLockAllShortcut, unlockAllStates, lockAllStates } = props;
    return (
        <Col span={3}>
            <CVATTooltip title={`Switch lock property for all ${switchLockAllShortcut}`}>
                <span className='text-20px text-[#4E5969]'>
                    {statesLocked ? (
                        <Icon component={LockIcon} onClick={unlockAllStates} />
                    ) : (
                        <Icon component={UnlockIcon} onClick={lockAllStates} />
                    )}
                </span>
            </CVATTooltip>
        </Col>
    );
}

function HideAllSwitcher(props: Props): JSX.Element {
    const { statesHidden, switchHiddenAllShortcut, showAllStates, hideAllStates } = props;
    return (
        <div className='flex-1 flex justify-center items-center'>
            <CVATTooltip title={`Switch hidden property for all ${switchHiddenAllShortcut}`}>
                <span className='text-20px text-[#4E5969]'>
                    {statesHidden ? (
                        <Icon component={EyeCloseIcon} onClick={showAllStates} />
                    ) : (
                        <Icon component={EyeIcon} onClick={hideAllStates} />
                    )}
                </span>
            </CVATTooltip>
        </div>
    );
}

function GTSwitcher(props: Props): JSX.Element {
    const { showGroundTruth, changeShowGroundTruth } = props;
    return (
        <Col span={3}>
            <CVATTooltip title='Show Ground truth annotations and conflicts'>
                <Icon
                    className={`cvat-objects-sidebar-show-ground-truth ${
                        showGroundTruth ? 'cvat-objects-sidebar-show-ground-truth-active' : ''
                    }`}
                    component={ShowGroundTruthIcon}
                    onClick={changeShowGroundTruth}
                />
            </CVATTooltip>
        </Col>
    );
}

function CollapseAllSwitcher(props: Props): JSX.Element {
    const { statesCollapsed, expandAllStates, collapseAllStates } = props;
    return (
        <Col span={3}>
            <CVATTooltip title='Expand/collapse all'>
                <span className='text-20px text-[#4E5969]'>
                    {statesCollapsed ? (
                        <Icon component={CaretUpIcon} onClick={expandAllStates} />
                    ) : (
                        <Icon component={CaretDownIcon} onClick={collapseAllStates} />
                    )}
                </span>
            </CVATTooltip>
        </Col>
    );
}

function ObjectListHeader(props: Props): JSX.Element {
    const { workspace, readonly, statesOrdering, count, changeStatesOrdering } = props;
    const {
        approval: { annotationData },
    } = useAnnotation();

    let firstCount = 0;
    let secondCount = 0;
    if (annotationData) {
        Object.keys(annotationData).forEach((key) => {
            const [, firstReview = {}, secondReview = {}] = annotationData[key];
            if (firstReview.approvalStatus === 1) {
                firstCount++;
            }
            if (secondReview.approvalStatus === 2 && secondReview.correctIndex === 2) {
                secondCount++;
            }
        });
    }

    return (
        <Row justify='space-between' align='middle' gutter={[16, 16]}>
            <Col span={24}>
                <div className='bg-[#F7F8FA] flex items-center p-3 rounded'>
                    <span>
                        <span className='text-[#86909C]'>已标：</span>
                        <span className='font-bold'>{count}</span>
                    </span>
                    <Divider type='vertical' />
                    <span>
                        <span className='text-[#86909C]'>初审修改：</span>
                        <span className='font-bold'>{firstCount}</span>
                    </span>
                    <Divider type='vertical' />
                    <span>
                        <span className='text-[#86909C]'>复审标记：</span>
                        <span className='font-bold'>{secondCount}</span>
                    </span>
                </div>
            </Col>
            <Col span={24}>
                <StatesOrderingSelector statesOrdering={statesOrdering} changeStatesOrdering={changeStatesOrdering} />
            </Col>
            <div className='flex items-center w-full'>
                <LockAllSwitcher {...props} />
                <HideAllSwitcher {...props} />
                {/* {workspace === Workspace.REVIEW && <GTSwitcher {...props} />} */}
                <CollapseAllSwitcher {...props} />
            </div>
        </Row>
    );
}

export default React.memo(ObjectListHeader);
